<template>
  <div class="box">
    <div class="todo">
      <h1>todolist</h1>
      <myheader></myheader>
      <mylist></mylist>
      <myfooter></myfooter>
    </div>
  </div>
</template>
<script setup>
import myheader from '../components/Header/index.vue'
import mylist from '../components/List/index.vue'
import myfooter from '../components/Footer/index.vue'
</script>
<style scoped>
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.box {
  width: 90vw;
  height: 90vh;
  margin: auto;
  background-color: #6d1b13;
  position: relative;
}
.box .todo {
  width: 40%;
  min-width: 380px;
  height: 80%;
  background-color: #f2f2f2;
  border-radius: 10px;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 30px;
}
.box .todo img {
  width: 200px;
  margin: auto;
  display: block;
}
.box .todo h4 {
  text-align: center;
  margin: 20px 0;
}
</style>
